<!doctype html>
<html><head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <style type='text/css'>
            html { font-family:Helvetica; color:#222; }
            h1 { color:steelblue; font-size:24px; margin-top:24px; }
            button { margin:0 3px 10px; font-size:12px; }
            .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
            </style>
</head><body>
    <h1>WebViewJavascriptBridge Demo</h1>
    <script>
    window.onerror = function(err) {
		log('window.onerror: ' + err)
	}

    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    setupWebViewJavascriptBridge(function(bridge) {
        var uniqueId = 1
		function log(message, data) {
			var log = document.getElementById('log')
			var el = document.createElement('div')
			el.className = 'logLine'
			el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
			if (log.children.length) { log.insertBefore(el, log.children[0]) }
			else { log.appendChild(el) }
		}

        bridge.registerHandler('updateAmout', function(data, responseCallback) {
			log('ObjC called updateAmout', data)
			var responseData = { 'response':'ok' }
			responseCallback(responseData)
		})
                                  
		var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
		callbackButton.innerHTML = 'Fire rechargeByIAP'
		callbackButton.onclick = function(e) {
			e.preventDefault()
			log('JS calling handler "rechargeByIAP"')
            bridge.callHandler('rechargeByIAP',
                            {'userName': 'ipadair2', 'selectedPid':'com.crtvup.kfysy.product.6coins'},
                            function(response) {
                                log('JS got response', response)
                            })
		}
    })
                                   
                                   
    
                                   
        </script>
    <div id='buttons'></div> <div id='log'></div>
</body></html>



